<template>
  <span class="notice-icon-badge" @click="showMessageList">
    <el-badge :value="messageCount" class="item">
      <i class="el-icon-bell" />
    </el-badge>
  </span>
</template>

<script>
export default {

  data() {
    return {

    }
  },
  computed: {
    messageCount() {
      return this.$store.state.app.unreadMessageCount
    }
  },
  mounted() {
    this.$store.dispatch('app/initUnreadMessageCount')
  },
  methods: {
    showMessageList() {
      this.$router.push({ path: '/support/message', query: {} })
    }

  }

}
</script>

<style lang="scss" >
.notice-icon-badge {
  .el-badge__content.is-fixed {
    position: absolute;
    top: 10px;
    right: 10px;
    -webkit-transform: translateY(-50%) translateX(100%);
    transform: translateY(-50%) translateX(100%);
  }
}
</style>

<style lang="scss" scoped>
.item {
  margin-right: 10px;
}
</style>
